<template>
  <div id="app">
    <p class="red-p">红色</p>
    <p class="yellow-p">黄色</p>
    <p class="blue-p">蓝色</p>
    <p class="green-p">绿色</p>
    <p class="purple-p">紫色</p>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
}
</script>

<style lang="scss">
#app {
  // 定义复用方法
  @mixin color($color, $size) {
    color: $color;
    font-size: $size;
  }
  .red-p {
    // 调用color方法  顺序传入参数
    @include color(red, 1px);
  }
  .yellow-p {
    @include color(yellow, 5px);
  }
  .blue-p {
    @include color(blue, 10px);
  }
  .green-p {
    @include color(green, 15px);
  }
  .purple-p {
    @include color(purple, 20px);
  }
}
</style>
